<template>
  <div class="mv-info-box">
    <div class="mv-left">
      <h4><i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>MV详情</h4>
      <div class="qt-play-wrap">
        <video class="mv-play" name="media" :src="mvUrl" autoplay controls>
          <!-- <source :src="mvUrl" srcset="" type="video/mp4"> -->
        </video>
      </div>
    <!--   音乐人头像   -->
      <div class="song-aut">
        <img class="song-aut-cover" :src="mvInfo['artists'][0]['img1v1Url']"></img>
        <p class="song-auts"><span v-for="(item,index) in mvInfo['artists']" :key="index">{{item.name}}</span></p>
      </div>
    <!--  音乐名称信息  -->
      <div class="song-info">
        <h3 class="song-name">{{ mvInfo.name }}</h3>
        <p class="song-play-info">发布:<span class="public-time">{{ mvInfo.publishTime }}</span>播放:<span class="play-count">{{ mvInfo.playCount }}</span></p>
      </div>
      <h5 class="comment">评论({{ comment.total }})</h5>
      <el-input
          type="textarea"
          placeholder="请输入内容"
          rows="5"
          v-model="textarea"
          maxlength="50"
          show-word-limit
      >
      </el-input>
      <div class="pl">
        <h4>全部评论<span>({{ comment.total }}条)</span></h4>
        <ul class="song-pinglun-list">
          <li class="song-pinglun-item" v-for="(item,index) in comment.comments" :key="index">
            <img class="song-pinglun-avater" :src="item.user.avatarUrl" alt="" srcset="">
            <div class="song-item-right">
              <p class="right-top"><span class="coment-nick-name">{{item.user.nickname}}:</span><span class="coment-content">{{item.content}}</span></p>
              <p class="right-bot"><span class="coment-str">{{item.timeStr}}</span><span class="coment-time">{{item.time | formatPlayTime}}</span></p>
            </div>
          </li>
        </ul>
        <!-- 分页器具 -->
        <el-pagination
            layout="prev, pager, next"
            @current-change="currentPageHandler"
            :page-size="limit"
            :total="comment.total">
        </el-pagination>
      </div>
    </div>
<!--    -->
    <div class="mv-right">
      <h4>相关推荐</h4>
      <ul class="mv-simi-list">
        <li class="mv-simi-item" v-for="(item,index) in simiList" :key="item.id" @click="toMvInfo(item.id)">
          <img :src="item.cover" class="simi-cover" :alt="item.name">
          <div class="simi-right">
            <p class="simi-mv-title">{{ item.name }}</p>
            <p class="simi-author"><span class="name">by. {{ item.artistName }}</span><span class="mv-curstion">时长:{{ item.duration | formatPlayTime}}</span></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {getMvInfo,getMvMedia,getSimiMv,getMvComment} from '@/request/Api.js'
export default {
  name:'MvInfo',
  created(){
    this.init()
  },
  data(){
    return {
      mvid:this.$route.params.mvid,
      mvUrl:'',
    //  相似mv列表
      simiList:[],
      mvInfo:{artists:[{img1v1Url:''}]},
      textarea:'',
      limit:20,
      offset:1,
      before:'',
      comment:{
        total:0,
        comments:[]
      }
    }
  },
  watch:{
    $route(){
      if(this.$route.params.mvid) {
        this.mvid = this.$route.params.mvid
        console.log('当前mvid',this.mvid)
        this.init()
      }
    }
  },
  methods:{
    init(){
      this.getMvInfo()
      this.getMvMedia()
      this.getSimiMv()
      this.getMvComment(this.mvid,this.limit,this.offset,this.before)
    },
    async getMvInfo() {
      const {data:res} = await getMvInfo(this.mvid)
      console.log('获取到的mv信息',res);
      this.mvInfo = res.data
    },
    async getMvMedia() {
      const {data:res} = await getMvMedia(this.mvid)
      console.log('获取到的视频信息',res);
      this.mvUrl = res.data.url
    },
    async getSimiMv(){
      const {data:res} = await getSimiMv(this.mvid)
      console.log('获取到的相似的mv信息列表',res)
      this.simiList = res.mvs
    },
    async getMvComment(mvid,limit,offset,before) {
      const  {data:res} = await getMvComment(mvid,limit,offset,before)
      console.log('获取的mv评论',res)
      this.comment = {...this.comment,...res}
    },
    toMvInfo(mvid){
      this.$router.push({name:'MVINFO',params:{mvid}})
    },
  //  【评论切换分页】
    currentPageHandler(idx){
      this.offset = idx
      this.getMvComment(this.mvid,this.limit,this.offset,this.before)
    }
  }
}
</script>

<style lang="less" scoped>
.mv-info-box {
  overflow-y: scroll;
  padding-bottom: 4rem;
  width: 100%;
  h4 {
    margin: .4rem 0px;
    display: flex;
    align-items: center;
  }
  .icon-fanhui {
    cursor: pointer;
    margin-right: .4rem;
    &:hover {
      color: red;
    }
  }
  .mv-left {
    //background: rgb(195, 81, 81);
    width: 70%;
    float: left;
    .qt-play-wrap {
      background: #000;
      .mv-play {
        width: 100%;
        height: 20rem;
      }
    }
    .song-aut {
      margin: .6rem 0px;
      display: flex;
      align-items: center;
      .song-aut-cover {
        object-fit: cover;
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 100%;
      }
      .song-auts {
        margin-left: .5rem;
        font-size: .8rem;
        font-weight: 300;
      }
    }
  //  音乐的名称
    .song-info {
      margin: .6rem 0px .1rem 0px;
      .song-name {
        font-weight: bolder;
      }
      .song-play-info {
        font-size: .7rem;
        color: #c2c2c2;
        .public-time {
          margin-right: .6rem;
        }
      }
    }

  //  评论
    .comment {
      margin: .6rem 0px;
    }
    ::v-deep.el-pagination {
      text-align: center;
      padding: 1rem 5px;
      .active {
        color: red;
      }
    }
    .song-pinglun-list {
      width: 100%;
      .song-pinglun-item {
        padding: .8rem 0px;
        width: 100%;
        display: flex;
        border-bottom: 1px #ebebeb solid;
        .song-pinglun-avater {
          width: 2rem;
          height: 2rem;
        }
        .song-item-right {
          font-size: .8rem;
          margin-left: .8rem;
          display: flex;
          flex-direction: column;
          color: rgb(153, 153, 153);
          .right-top {
            .coment-nick-name {
              color: rgb(115, 148, 188);
              cursor: pointer;
              &:hover {
                list-style: decimal;
              }
            }
            .coment-content {
              color: rgb(0, 0, 0);
            }
          }
          .right-bot {
            margin-top: .6rem;
            font-size: .7rem;
          }
        }
      }
    }
  }
  .mv-right {
    padding: 0px .4rem;
    width: 30%;
    float: left;
    h4 {
      margin: .4rem 0px;
    }
    .mv-simi-list {
      width: 100%;
      .mv-simi-item {
        margin: .2rem 0px;
        padding: .2rem .3rem;
        display: flex;
        align-items: center;
        width: 100%;
        height: 4rem;
        .simi-cover {
          border-radius: 5px;
          cursor: pointer;
          display: block;
          object-fit: cover;
          width: 6rem;
          height: 100%;
          margin-right: .4rem;
        }
        .simi-right {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          height: 100%;
          .simi-mv-title {
            cursor: pointer;
            font-size: .6rem;
            color: #000;
            &:hover {
              color: red;
            }
          }
          .simi-author {
            font-size: .6rem;
            color: #6f6f6f;
            .name {
              margin-right: .5rem;
            }
          }
        }
      }
    }
  }
}
</style>